<template>
  <div 
    :class="border?'border-bottom':''" 
    class="sjxheader">
    <div class="header-main flex flex-justify-between flex-align-center">
      <div class="header-left flex flex-align-center">
        <div 
          class="logo pic formForPC" 
          @click="main">
          <img 
            :src="logo" 
            alt="">
        </div>
        <div 
          class="logo pic formForM" 
          @click="main">
          <img 
            :src="logom"
            height="35"
            alt="">
        </div>
      </div>
      <div class="header-right">
        <div class="formForPC flex flex-align-center full-height">
          <ul class="nav-ul flex fl">
            <li 
              v-for="(item,index) in arr" 
              :class="[{active:item.path==$route.path.toLowerCase()}, color === 'blue'?'blue':'white']" 
              :key="index" 
              class="nav-li font-16 flex text-center flex-align-center pointer" 
              @click="jump(item.path)">{{ item.title }}</li>
          </ul>
          <div 
            style="display:none"
            class="loanApply-pc flex flex-align-center flex-justify-center fr pointer" 
            @click="apply">{{ $t('header.loanApply') }}</div>
        </div>
        <div class="formForM flex flex-align-center full-height">
          <ul 
            :style="Boolean(menuOpen)?{display: 'block'}:{display: 'none'}" 
            class="nav-ul flex flex-align-center">
            <li 
              v-for="(item,index) in arr" 
              :class="[{true:item.path==$route.path.toLowerCase()}, color === 'blue'?'blue':'white']" 
              :key="index" 
              class="nav-li font-16 flex flex-align-center flex-justify-center pointer" 
              @click="jump(item.path)">{{ item.title }}</li>
          </ul>
          <div 
            :class="menuOpen === false ? 'open': 'close'" 
            class="loanApply-m menu-icon-wrapper" 
            @click="menuOpen=!menuOpen">
            <div class="menu-icon-first"/>
            <div class="menu-icon-second"/>
            <div class="menu-icon-thrid"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import '../sass/icon.scss'
export default {
  name: 'Sjxheader',
  props: {
    // logo: {
    //   type: [String],
    //   default: require('static/img/myDong.png')
    // },
    // logom: {
    //   type: [String],
    //   default: require('static/img/logo-m.png')
    // },
    color: {
      type: [String],
      default: '#fff'
    },
    border: {
      type: [Boolean],
      default: false
    }
  },
  data() {
    return {
      arr: [
        { title: this.$t('header.home'), path: '/' },
        { title: this.$t('header.howToLoan'), path: '/loan' },
        { title: this.$t('header.howToPay'), path: '/repay' },
        { title: this.$t('header.commonProblem'), path: '/faq' },
        { title: this.$t('header.about'), path: '/aboutus' },
        { title: this.$t('header.contact'), path: '/callus' }
      ],
      menuOpen: false
    }
  },
  computed: {
    logo() {
      const logo = require('static/img/logo.png')
      if (process.client) {
        const fullCurrentDomain = window.location.origin
        if (fullCurrentDomain.indexOf('mydong') > 0) {
          const logo = require('static/img/myDong.png')
        } else {
          const logo = require('static/img/logo.png')
        }
      }
      return logo
    },
    logom() {
      const logoM = require('static/img/logo.png')
      if (process.client) {
        const fullCurrentDomain = window.location.origin
        if (fullCurrentDomain.indexOf('mydong') > 0) {
          const logoM = require('static/img/logo-m.png')
        } else {
          const logoM = require('static/img/logo.png')
        }
      }
      return logoM
    }
  },
  methods: {
    jump(path) {
      this.$router.push({ path: path })
    },
    main() {
      this.$router.push({ path: '/' })
    },
    apply() {
      this.$router.push('/')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
$mainCol: #458afe;
/* 初始化---begin */
.sjxheader {
  width: 100%;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  background-color: transparent;
  .header-main {
    height: 100%;
    margin: 0 auto;
    .header-left {
      width: auto;
      height: 100%;
      .logo-title {
        font-size: 30px;
        color: #fff;
      }
    }
    .header-right {
      width: auto;
      height: 100%;
    }
  }
}
/* 初始化---end */
@media screen and (min-width: 1200px) {
  .sjxheader {
    .header-main {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      .header-left {
        width: auto;
        height: 100%;
        .logo {
          display: flex;
          align-items: center;
          height: 87px;
          cursor: pointer;
        }
        .logo-title {
          font-size: 30px;
          color: #fff;
        }
      }
      .header-right {
        width: auto;
        height: 100%;
        .nav-ul {
          width: auto;
          height: 60%;
          .nav-li {
            height: 100%;
            margin: 0 10px;
            transition: all 0.5s ease;
          }
          .active {
            border-bottom: 4px solid #fff;
          }
        }
        .loanApply-pc {
          margin: 0 54px;
          width: 132px;
          height: 60px;
          color: #fff;
          font-size: 16px;
          background-color: #00c853;
          border-radius: 30px;
          box-shadow: 5px 0px 13px rgba(84, 200, 90, 0.5);
        }
        .forM,
        .loanApply-m {
          display: none;
        }
      }
    }
  }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .sjxheader {
    .header-main {
      width: 95%;
      height: 100%;
      margin: 0 auto;
      padding-top: 10px;
      .header-left {
        width: auto;
        height: 100%;
        .logo {
          width: 66px;
          height: 87px;
          cursor: pointer;
        }
        .logo-title {
          font-size: 30px;
          color: #fff;
        }
      }
      .header-right {
        width: auto;
        height: 100%;
        .nav-ul {
          width: auto;
          height: 100%;
          .nav-li {
            height: 100%;
            margin: 0 10px;
            transition: all 0.5s ease;
          }
          .active {
            border-bottom: 4px solid #fff;
          }
        }
        .loanApply-pc {
          margin-left: 10px;
          width: 132px;
          height: 60px;
          color: #fff;
          font-size: 16px;
          background-color: #00c853;
          border-radius: 30px;
          box-shadow: 5px 0px 13px rgba(84, 200, 90, 0.5);
        }
        .forM,
        .loanApply-m {
          display: none;
        }
      }
    }
  }
}
@media only screen and (max-width: 767px) {
  .sjxheader {
    width: 100%;
    height: 60px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: #3652df;
    .header-main {
      position: relative;
      .header-left {
        padding-left: 30px;
        .logo > img {
          width: auto;
          height: 35px;
          cursor: pointer;
        }
        .logo-title {
          font-size: 30px;
          color: #fff;
        }
      }
      .header-right {
        .nav-ul {
          position: absolute;
          top: 60px;
          left: 0;
          right: 0;
          background-color: #3652df;
          z-index: 9999;
          li {
            height: 50px;
          }
        }
      }
      .forPC,
      .loanApply-pc {
        display: none;
      }
      .loanApply-m {
        margin-right: 20px;
      }
    }
  }
}
</style>
